<template>
	<a-modal v-model:open="open" title="选择数据集" @ok="handleOk" @cancel="handleCancel">
		<div class="h-[400px] mt-[20px]">
			<a-row :gutter="[10, 10]">
				<a-col :span="20">
					<a-input v-model:value="searchFormState" style="width: 100%" />
				</a-col>
				<a-col :span="4">
					<a-button style="width: 100%; font-weight: 600" type="primary" @click="querylist">搜索</a-button>
				</a-col>
				<a-col :span="24" class="h-[340px] overflow-y-auto">
					<a-collapse v-model:activeKey="activeKeys">
						<a-collapse-panel v-for="parent in options" :key="parent.id">
							<template #header>
								<span class="header-text">{{ parent.name }}</span>
							</template>

							<a-radio-group v-model:value="apiId" @change="handleChange">
								<a-row :gutter="[10, 10]">
									<a-col :span="24" v-for="child in parent.config.indicators" :key="child.id">
										<a-radio :value="child.id">
											{{ child.name }}
										</a-radio>
									</a-col>
								</a-row>
							</a-radio-group>
						</a-collapse-panel>
					</a-collapse>
				</a-col>
			</a-row>
		</div>
	</a-modal>
</template>
<script setup>
	import { ref, reactive, defineProps, defineEmits, onMounted, watch } from 'vue'
	import { designStore } from '@/views/plugin/dashboard/store'
	const useDesignStore = designStore()
	const emits = defineEmits(['upDataOpen', 'apiId', 'selectData'])
	const props = defineProps({
		open: {
			type: Boolean,
			default: false
		},
		defId: {
			type: String,
			default: ''
		}
	})
	const open = ref(false)
	const formState = reactive({})
	// 当前选中的值
	const apiId = ref(props.defId)
	// 查询的内容
	const searchFormState = ref(null)
	// 展开的面板keys
	const activeKeys = ref([])
	// 展开的面板keys
	const options = ref([])
	// 选中的数据
	const selectData = ref({})
	watch(
		() => props.open,
		(newVal) => {
			open.value = newVal
		}
	)
	watch(
		() => apiId.value,
		(newVal) => {
			useDesignStore.dataSource.forEach((parent) => {
				parent.config.indicators.forEach((child) => {
					if (child.id === newVal) {
						selectData.value = child
					}
				})
			})
		}
	)
	const handleChange = (e) => {
		emits('apiId', e.target.value)
	}
	const handleOk = (e) => {
		emits('upDataOpen', false)
		emits('selectData', selectData.value)
	}
	const handleCancel = (e) => {
		emits('upDataOpen', false)
	}

	const querylist = async () => {
		options.value = await useDesignStore.getDataSource({ searchFormState: searchFormState.value })
		// datasetApi.page({ searchFormState: searchFormState.value }).then((res) => {
		// 	useDesignStore.dataSource = res.records || useDesignStore.dataSource
		// 	options.value = res.records
		// })
	}
	onMounted(() => {
		// querylist()
	})
</script>
<style lang="less" scoped></style>
